<template>
  <div class="w750">
    <!-- 我的{{integralName}} -->
    <div class="pre-deposit">
      <div class="balance">
        <span class="pre-bg"
          ><img src="@/assets/images/integral.jpg" alt=""
        /></span>
        <span class="txt">可用{{ integralName }}</span>
        <p class="num">
          <span class="price">{{
            curIntegral.availableIntegral ? curIntegral.availableIntegral : 0
          }}</span>
        </p>
      </div>

      <div class="integral-statistics">
        <div class="state">
          <div class="item line">
            <span class="num"
              ><span class="price">{{
                curIntegral.totalIntegral ? curIntegral.totalIntegral : 0
              }}</span></span
            >
            <span class="txt">累计{{ integralName }}</span>
          </div>
          <div class="item line">
            <span class="num"
              ><span class="price">{{
                curIntegral.consumeIntegral ? curIntegral.consumeIntegral : 0
              }}</span></span
            >
            <span class="txt">已消耗{{ integralName }}</span>
          </div>
          <div class="item">
            <span class="num"
              ><span class="price">{{
                curIntegral.freezeIntegral ? curIntegral.freezeIntegral : 0
              }}</span>
            </span>
            <span class="txt">冻结{{ integralName }}</span>
          </div>
        </div>
      </div>

      <div class="entry-con mt10" @click="expectation">
        <div class="con-box">
          <div class="fl">
            <span class="entry-icon"
              ><img src="@/assets/images/int-icon02.png" alt="" /></span
            ><span class="entry-name">去签到</span>
          </div>
          <div class="fr">
            <span class="" style="font-size: 14px; color: #999;margin-right: 5px;">敬请期待</span>
            <em class="arr"><img src="@/assets/images/arrow.png" alt="" /></em>
          </div>
        </div>
      </div>
      <div class="entry-con">
        <div class="con-box" @click="goPage('integralRule')">
          <div class="fl">
            <span class="entry-icon"
              ><img src="@/assets/images/int-icon00.png" alt="" /></span
            ><span class="entry-name">{{ integralName }}规则</span>
          </div>
          <div class="fr">
            <em class="arr"><img src="@/assets/images/arrow.png" alt="" /></em>
          </div>
        </div>
      </div>
      <div class="entry-con">
        <div class="con-box" @click="goPage('integralDet')">
          <div class="fl">
            <span class="entry-icon"
              ><img src="@/assets/images/pre-icon03.png" alt="" /></span
            ><span class="entry-name">{{ integralName }}明细</span>
          </div>
          <div class="fr">
            <em class="arr"><img src="@/assets/images/arrow.png" alt="" /></em>
          </div>
        </div>
      </div>
      <div class="entry-con" @click="exchange" v-if="curIntegral.enableIntegralWithdraw">
        <div class="con-box">
          <div class="fl">
            <span class="entry-icon"
              ><img src="@/assets/images/pre-icon04.png" alt="" /></span
            ><span class="entry-name">提现记录</span>
          </div>
          <div class="fr">
            <em class="arr"><img src="@/assets/images/arrow.png" alt="" /></em>
          </div>
        </div>
      </div>
      <div
        class="entry-con"
        @click="integralWithdrawal"
        v-if="curIntegral.enableIntegralWithdraw"
      >

        <div class="con-box">
          <div class="fl">
            <span class="entry-icon"
              ><img src="@/assets/images/pre-icon01.png" alt="" /></span
            ><span class="entry-name">{{ integralName }}提现</span>
          </div>
          <div class="fr">
            <span class="" style="font-size: 14px; color: #999; margin-right:5px;">{{
              !curIntegral.integralWithdrawStartpoint
                ? `你有${curIntegral.availableIntegral}${integralName}可提现`
                : `共${curIntegral.availableIntegral}, 满${curIntegral.integralWithdrawStartpoint}可提现`
            }}</span>
            <em class="arr"><img src="@/assets/images/arrow.png" alt="" /></em>
          </div>
        </div>
      </div>
    </div>
    <!-- /我的{{integralName}} -->
  </div>
</template>

<script>
import cash from "utils/tool";
import { myIntegral } from "api/pointsApi";
import { mapState } from "vuex";
export default {
  data() {
    return {
      curIntegral: {
        availableIntegral: 0,
        totalIntegral: 0,
        consumeIntegral: 0,
        freezeIntegral: 0,
        integralWithdrawStartpoint: 0,
        enableIntegralWithdraw: false,
      },
      Money: cash, //价格转换
    };
  },
  computed: {
    ...mapState(["integralName"]),
  },
  created() {
    // this.$route.meta.titleName = '123123'
    // this.$route.meta.title = '12312313'
  },
  mounted() {
    this.getuserIntegralCenter();
  },
  methods: {
    // 用户{{integralName}}中心
    async getuserIntegralCenter() {
      try {
        let res = await myIntegral();
        if (res.status != 1) {
          this.$toast(res.msg);
          return;
        }
        this.curIntegral = { ...this.curIntegral, ...res.result };
      } catch (error) {
      }
    },
    goPage(url) {
      let urlMap = {
        integralDet: "/integralDet",
        integralRule: "/integralRule",
      };
      this.$router.push(urlMap[url]);
    },
    expectation() {
      this.$toast("此功能正在努力开发，敬请期待~~~");
    },
    exchange() {
      this.$router.push({
        path: '/myExtension/extensionWithdraw',
        query: {
          source: 'integral',
        }
      });

        
    },
    //积分提现
    integralWithdrawal() {
      const {
        availableIntegral,
        integralWithdrawStartpoint,
      } = this.curIntegral;

      if (
        integralWithdrawStartpoint &&
       ( integralWithdrawStartpoint > availableIntegral)
      ) {
        this.$toast(`可用${this.integralName}未满足提现条件`);
        return;
      }

      this.$router.push("/integralWithdrawal");
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.$nextTick(() => {
        to.meta.titleName = vm.$store.state.integralName + "中心";
        to.meta.title = vm.$store.state.integralName + "中心";
        document.title = vm.$store.state.integralName + "中心";
      });
    });
  },
  components: {},
};
</script>

<style src="../../assets/css/pre-deposit.css" scoped></style>
<style scoped>
.entry-con .con-box .arr {
  display: inline-block;
  vertical-align: top;
  width: 8px;
  height: 8px;
  margin-top: 10px;
}
</style>
